<template>
  <AppHeader :title="resourceObj.title" :banAnimate="true" backgroundColor="#ffffff">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
    <template #right>
      <img
        @click="onClickRight"
        src="@/assets/images/listening/copy.png"
        width="18"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container" v-for="(p,index) in pareList" :key="12345 + index" v-show="index === pActive">
    <div class="practice-top" v-if="p.qtype !== 3">
      <div class="practice-top-currentPage">{{ active }}<span>/{{ datalist.length || 1 }}</span></div>
      <div class="practice-top-slider">
        <Slider v-model="active" min="0" :max="datalist.length || 1000" active-color="#0CB76C" />
      </div>
    </div>
    <div class="container-text" v-html="p.stem" id="dsfs" v-if="pareList.length === 1 "/>
    <div class="swiper-list" v-if="datalist.length > 0">
      <div class="list-item" v-for="(item,i) in datalist" :key="i" v-show="i===active-1">
        <div class="title" v-html="item.stem"/>
        <template v-if="item.qtype === 1">
          <div v-for="(option,idx) in item.options" :key="idx" class="option"  @click="selectClick(item,idx)">
              <span class="unchecked" :class="[inx === idx ? 'uActive' : '']">{{idx===0?'A':idx===1?'B': idx === 2 ? 'C' : 'D'}}</span>
              <span class="option-item" v-html="option.stem"></span>
          </div>
        </template>
        <template v-if="item.qtype === 6">
          <van-field
            v-model="message"
            rows="5"
            border
            @blur="change(item)"
            autosize
            type="textarea"
            placeholder="请输入"
          />
        </template>
      </div>
    </div>
    <div class="swiper-list" v-if="datalist.length ===  0 &&(resourceObj.title.indexOf('读写') > -1 || p.qtype === 6)">
      <van-field
        v-model="message"
        rows="5"
        border
        @blur="change(item)"
        autosize
        type="textarea"
        placeholder="请输入"
      />
    </div>
    <div class="btns">
      <div class="btn" @click="prevclick">
        <van-button type="default" block round >上一题</van-button>
      </div>
      <div class="btn" @click="nextclick">
        <van-button type="primary" block round color="linear-gradient( 270deg, #29F19C 0%, #02A1F9 100%)">下一题</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Slider, Overlay ,Field} from "vant";
import AppHeader from "@/components/AppHeader.vue";
import { useRouter,useRoute } from "vue-router";
import { onMounted ,ref ,onBeforeUnmount,nextTick} from "vue";
const router = useRouter();
const route = useRoute();
const datalist = ref([])
const message = ref('')
const pareList = ref([])
const resourceObj = ref({})
const inx = ref(null);
const active = ref(1);
const pActive = ref(0);
var time = 0
const onClickLeft = () => {
router.back();
};
const onClickRight = () => { 
  router.push('/writtenTest/readSubmit')
}
var timer = setInterval(async ()=>{
  time ++
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer)
  timer = null
})
onMounted(()=>{
  resourceObj.value = JSON.parse(sessionStorage.getItem('resource'))
  if(resourceObj.value.title.indexOf('读写') > -1){
    pareList.value = [resourceObj.value.parts[0].children.find(item => item.sid == route.query.sid)]
    datalist.value =pareList.value[0].children.length > 1 ? pareList.value[0].children : [{answer:{sorce:-1,sType:'',isAnswer:false,sorceTotal:pareList.value[0].question_ref_sorce},...pareList.value[0]}]
    message.value = pareList.value[0].children.length ? pareList.value[0].children.length === 1 ? pareList.value[0].children[0].answer.sType : pareList.value[0].children[0].children[0].answer.sType || '' : ''
  }else{
    if(route.query.pId){
      pareList.value =[ resourceObj.value.parts.find(item => item.sid == route.query.sid).children.find(k=>k.sid == route.query.pId)]
      datalist.value = pareList.value[0].children
    }else{
      pareList.value = resourceObj.value.parts.find(item => item.sid == route.query.sid).children
      if( pareList.value[0].qtype === 6){
        datalist.value = pareList.value
      }else{
        datalist.value = pareList.value[0].children.length  ? pareList.value[0].children : pareList.value
      }
    }
    nextTick(()=>{
      if(datalist.value[0].qtype === 1){   //选择不能输入
        for (let element of document.querySelectorAll('#dsfs input')) {
            element.setAttribute('disabled', true);
        }
      }
    })
  }
  if(route.query.num){
    active.value = route.query.num * 1
  }
  
})
const change = (d)=>{
  datalist.value[active.value - 1].children[0].answer.sorce = message.value === d.ref_info.answers[0] ? d.answer.sorceTotal : 0
  datalist.value[active.value - 1].children[0].answer.sType = message.value
  datalist.value[active.value - 1].children[0].answer.isAnswer = message.value === d.ref_info.answers[0]
  JSON.parse(sessionStorage.getItem('resource')).parts.forEach((item,index)=>{
      if(item.children.length > 0){
        item.children.forEach((child,inx)=>{
          if(child.sid === route.query.sid *1){
            resourceObj.value.parts[index].children[inx].children =  JSON.parse(JSON.stringify(datalist.value))
          }
        })
      }else{
        if(item.sid === route.query.sid *1){
          resourceObj.value.parts[index].children =  JSON.parse(JSON.stringify(datalist.value))
        }
      }
  })
  
  sessionStorage.setItem('resource',JSON.stringify(resourceObj.value))
}
const prevclick = () => { 
  //如果是已经选择了，进行回填
  if(active.value > 0){
    active.value --
    var k = datalist.value[active.value - 1].answer ? datalist.value[active.value - 1].answer.sType  : ''
    message.value = k
    if(k === 'A'){
      inx.value = 0
    }else if(k === 'B'){
      inx.value = 1
    }else if(k === 'C'){
      inx.value = 2
    }else if(k === 'D'){
      inx.value = 3
    }
    
  }else{
    if(pActive.value > 1){
      pActive.value --
      datalist.value = pareList.value[pActive.value].children
      active.value = datalist.value.length - 1
    }
  }
}
const nextclick = () => { 
  if(active.value  < datalist.value.length){
    active.value ++
    var k = datalist.value[active.value - 1].answer ? datalist.value[active.value - 1].answer.sType  : ''
    console.log(datalist.value[active.value - 1])
    message.value = k
    inx.value= null
    if(k === 'A'){
      inx.value = 0
    }else if(k === 'B'){
      inx.value = 1
    }else if(k === 'C'){
      inx.value = 2
    }else if(k === 'D'){
      inx.value = 3
    }
  }else{
    var num,ind,sid
    if(resourceObj.value.title.indexOf('读写') > -1){
      num = resourceObj.value.parts[0].children.findIndex(item => item.sid == route.query.sid)
      ind = resourceObj.value.parts[0].children.length
      if(num + 1 < ind){
        sid = resourceObj.value.parts[0].children[num + 1].sid
      }
    }else{
      num = resourceObj.value.parts.findIndex(item => item.sid == route.query.sid)
      if(resourceObj.value.parts[num].children.length > 1 && (resourceObj.value.parts[num].children[0].qtype === 3 || resourceObj.value.parts[num].children[0].qtype === 4 || resourceObj.value.parts[num].children[0].qtype === 5 || resourceObj.value.parts[num].children[0].qtype === 6)){
        var m = route.query.pId ? resourceObj.value.parts[num].children.findIndex(l=>l.sid == route.query.pId) :  0
        if( m + 1 < resourceObj.value.parts[num].children.length && resourceObj.value.parts[num].module_type_name.indexOf('读写综合') === -1){
          var obj = resourceObj.value.parts[num].children[m + 1]
          router.push({
            path: "/writtenTest/single",
            query: { sid:resourceObj.value.parts[num].sid,pId: obj.sid},
          });
        }else{
          router.push('/writtenTest/readSubmit')
          sessionStorage.setItem('time',time)
          clearInterval(timer)
        }
        return
      }else{
        ind = resourceObj.value.parts.length
        if(num + 1 < ind){
          sid=resourceObj.value.parts[num + 1].sid
        }
      }
    }
    if(num + 1 < ind){
      router.push({
        path: "/writtenTest/single",
        query: { sid },
      });
    }else{
      router.push('/writtenTest/readSubmit')
      sessionStorage.setItem('time',time)
      clearInterval(timer)
    }
    message.value = ''
  }
  
}
const selectClick = (item,i) =>{
  inx.value = i
  var sType = ''
  if(i === 0){
    sType = 'A'
  }else if(i === 1){
    sType = 'B'
  }else if(i === 2){
    sType = 'C'
  }else if(i === 3){
    sType = 'D'
  }
  datalist.value[active.value - 1].answer.sorce = 0
  if(item.options[i].id === item.ref_info.answers[0]){
    datalist.value[active.value - 1].answer.sorce = datalist.value[active.value - 1].answer.sorceTotal
  }
  datalist.value[active.value - 1].answer.sType = sType
  datalist.value[active.value - 1].answer.isAnswer = item.options[i].id === item.ref_info.answers[0]
  resourceObj.value.parts.find(item => item.sid == route.query.sid).children[pActive.value].children =  JSON.parse(JSON.stringify(datalist.value))
  sessionStorage.setItem('resource',JSON.stringify(resourceObj.value))
}
</script>

<style lang="scss" scoped>
.container {
height: 100%;
background-color: #ffffff;
padding-top: 44px;
padding-bottom: 100px;
overflow: scroll;
.practice-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;

      // margin: 0 12px;
      // margin-top: 15px;
      .practice-top-currentPage {
          font-size: 16px;
          color: #0CB76C;

          span {
              color: #8E8E8E;
          }
      }

      .practice-top-slider {
          min-width: 234px;
          flex: 1;
          margin: 0 10px;
      }
  }

  .container-text {
      padding: 15px 10px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 32px;
      text-align: left;
      font-style: normal;
  }
.swiper-list{
.list-item{
  padding: 0 15px;
  .title{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }
  .option{
    margin: 15px 0;
    .checked{
      background: #0CB76C;
      color: #ffffff;
    }
    .unchecked{
      display:inline-block;
      width: 30px;
      height: 30px;
      border: 1px solid #0CB76C;
      border-radius: 50%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #0CB76C;
      text-align: left;
      font-style: normal;
      text-align: center;
      line-height: 28px;
    }
    .uActive{
      color: #fff;
      background: #0CB76C;
    }
    .option-item{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #8E8E8E;
      line-height: 25px;
      text-align: left;
      font-style: normal;
      margin-left: 15px;
      ::v-deep div,p{
        display: inline-block;
      }
    }
  }
}
}
.btns{
display: flex;
  padding: 30px 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .btn{
    flex:1;
    &:first-child{
      margin-right: 15px;
    }
  }
}
}
::v-deep .van-slider__button {
    display: none !important;
}
.van-field{
  border:1px solid #dedede;
}
/* ::v-deep input{
  border:1px solid #dedede;
  padding-left:4px;
} */
</style>
